<template>
	<view>
		<view class="select">
			<view class="item" v-for="item,index in list" @click="go(index)" :class="index==cur?'active':''">
				{{item.title}}
			</view>
		</view>

		<view class="index1" v-if="cur == 0">


			<view v-if="!isFinish" style="width:1000px;">
				<view style="text-align: center;padding: 20px 0 20px 0;font-size: 25px;">
					下面的布局有些错乱，请点击相应位置进行样式调整
					<label class="btn" @click="start" v-if="!isStart">开始演练</label>
					<label class="btn" @click="start" v-if="isStart">结束演练</label>
					<label class="time" v-if="isStart">已用时{{time}}s</label>
				</view>
				<scroll-view scroll-y>
					<view style="border:1px solid red;height: 500px;    overflow: scroll;" :style="{flexDirection:flex_direction,flexWrap:flex_wrap,
				justifyContent:justify_content,
				alignItems:align_items,
				display :isFlex?'flex':'block',
				alignContent:align_content,alignSelf:align_self
				}" @tap.stop="showCss">
						<view v-for="item,index in data1"
							style="display: flex;align-items: center;flex-direction: column;background-color: #fff;">
							<navigator @click.stop="showCss">
								<image :src="item.img" :style="{width:width+'px',height:height+'px',background: bgColor,
							margin:margin1+'px '+margin2+'px '+margin3+'px '+margin4+'px ',padding:padding1+'px '+padding2+'px '+padding3+'px '+padding4+'px ',border:border+'px solid red',borderRadius:border_radiu+'px',
							boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px '}" />
							</navigator>
							<navigator :style="{width:widthTxt+'px',fontSzie:fontSzie+'px'}">{{item.title}}</navigator>
						</view>

					</view>
</scroll-view>

			</view>
		
		</view>
		<view class="index1" v-if="cur == 1">


			<view v-if="!isFinish" style="width:1000px;">
				<view style="text-align: center;padding: 20px 0 20px 0;font-size: 25px;">
					下面的布局有些错乱，请点击相应位置进行样式调整
					<label class="btn" @click="start" v-if="!isStart">开始演练</label>
					<label class="btn" @click="start" v-if="isStart">结束演练</label>
					<label class="time" v-if="isStart">已用时{{time}}s</label>
				</view>
				
					<scroll-view scroll-y>
						<view style="border:1px solid red;height: 500px;    overflow: scroll;background-color: #fff;"  :style="{flexDirection:flex_direction,flexWrap:flex_wrap,
				justifyContent:justify_content,
				alignItems:align_items,
				display :isFlex?'flex':'block',
				alignContent:align_content,alignSelf:align_self
				}" @tap.stop="showCss">
						<view v-for="item,index in data1"
							style="display: flex;align-items: center;flex-direction: column">
							<navigator @click.stop="showCss">
								<image :src="item.img" :style="{width:width+'px',height:height+'px',background: bgColor,
							margin:margin1+'px '+margin2+'px '+margin3+'px '+margin4+'px ',padding:padding1+'px '+padding2+'px '+padding3+'px '+padding4+'px ',border:border+'px solid red',borderRadius:border_radiu+'px',
							boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px '}" />
							</navigator>
							<navigator :style="{width:widthTxt+'px',fontSzie:fontSzie+'px'}">{{item.title}}</navigator>
						</view>

					</view>
					</scroll-view>

			</view>
			
		</view>
		<view class="index1" v-if="cur == 2">


			<view v-if="!isFinish" style="width:1000px;">
				<view style="text-align: center;padding: 20px 0 20px 0;font-size: 25px;">
					下面的布局有些错乱，请点击相应位置进行样式调整
					<label class="btn" @click="start" v-if="!isStart">开始演练</label>
					<label class="btn" @click="start" v-if="isStart">结束演练</label>
					<label class="time" v-if="isStart">已用时{{time}}s</label>
				</view>
				<scroll-view scroll-y>
					<view style="border:1px solid red;height: 500px;    overflow: scroll;background-color: #fff;"  :style="{flexDirection:flex_direction,flexWrap:flex_wrap,
				justifyContent:justify_content,
				alignItems:align_items,
				display :isFlex?'flex':'block',
				alignContent:align_content,alignSelf:align_self
				}" @tap.stop="showCss">
						<view v-for="item,index in data1"
							style="display: flex;align-items: center;flex-direction: column">
							<navigator @click.stop="showCss">
								<image :src="item.img" :style="{width:width+'px',height:height+'px',background: bgColor,
							margin:margin1+'px '+margin2+'px '+margin3+'px '+margin4+'px ',padding:padding1+'px '+padding2+'px '+padding3+'px '+padding4+'px ',border:border+'px solid red',borderRadius:border_radiu+'px',
							boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px '}" />
							</navigator>
							<navigator :style="{width:widthTxt+'px',fontSzie:fontSzie+'px'}">{{item.title}}</navigator>
						</view>

					</view>
				</scroll-view>


			</view>
			
		</view>
		<view class="index1" v-if="cur == 3">


			<view v-if="!isFinish" style="width:1000px;">
				<view style="text-align: center;padding: 20px 0 20px 0;font-size: 25px;">
					下面的布局有些错乱，请点击相应位置进行样式调整
					<label class="btn" @click="start" v-if="!isStart">开始演练</label>
					<label class="btn" @click="start" v-if="isStart">结束演练</label>
					<label class="time" v-if="isStart">已用时{{time}}s</label>
				</view>
					<scroll-view scroll-y>
						<view style="border:1px solid red;height: 500px;    overflow: scroll;background-color: #fff;"  :style="{flexDirection:flex_direction,flexWrap:flex_wrap,
				justifyContent:justify_content,
				alignItems:align_items,
				display :isFlex?'flex':'block',
				alignContent:align_content,alignSelf:align_self
				}" @tap.stop="showCss">
						<view v-for="item,index in data1"
							style="display: flex;align-items: center;flex-direction: column">
							<navigator @click.stop="showCss">
								<image :src="item.img" :style="{width:width+'px',height:height+'px',background: bgColor,
							margin:margin1+'px '+margin2+'px '+margin3+'px '+margin4+'px ',padding:padding1+'px '+padding2+'px '+padding3+'px '+padding4+'px ',border:border+'px solid red',borderRadius:border_radiu+'px',
							boxShadow:box_shadow4 +' '+box_shadow1+'px '+box_shadow2+'px '+box_shadow3+'px '+box_shadow5+'px '}" />
							</navigator>
							<navigator :style="{width:widthTxt+'px',fontSzie:fontSzie+'px'}">{{item.title}}</navigator>
						</view>

					</view>
					</scroll-view>
				
			</view>
		<!-- 	<view style="font-size: 25px;margin-left: 500px;" v-if="!isFinish">最终效果</view>
			<view style="width:100%" v-if="!isFinish">
				<image src="../static/nn.png" mode="aspectFit"
					style="border:1px solid red;width:1119px;height:224px;padding:0 20px;">
				</image>
			</view> -->
		</view>
		<view style="width:1000px;margin:auto" v-show="isFinish">
			<view class="wrap-row " style="margin-top:100px">
				<view class="wrap-y flex-sub " style="margin-right: 120px;">
					<view class="text-bold font40 margin-bottom-xs text-333">用时（{{time}}s）得分:</view>
					<progress :percent="num1" activeColor="#10AEFF" border-radius="7" stroke-width="15" />
				</view>
				<view class="wrap-y flex-sub">
					<view class="text-bold font40 margin-bottom-xs text-333">布局得分:</view>
					<progress :percent="num2" activeColor="#ff5500" border-radius="7" stroke-width="15" />
				</view>
			</view>
			<view class="wrap-row" style="margin-top: 40px;">
				<!-- 				<view class="wrap-y flex-sub margin-right-lg" style="margin-right: 120px;">
					<view class="text-bold font40 margin-bottom-xs text-333">根布局得分:</view>
					<progress :percent="num3" activeColor="#55aa00" border-radius="7" stroke-width="15" />
				</view> -->
				<view class="wrap-y flex-sub">
					<view class="text-bold font40 margin-bottom-xs text-333">整体得分:</view>
					<progress :percent="num4" activeColor="#ff55ff" border-radius="7" stroke-width="15" />
				</view>
			</view>
			<view class="wrap-row justify-center">
				<canvas style="width: 550px; height: 400px;" canvas-id="homeownerCanvas"
					class="homeowner-canvas_charts"></canvas>

				<view class="wrap-x justify-start align-end flex-sub">
					<view class="text-bold font40 margin-bottom-xs text-333">最终得分:</view>
					<view class="text-red font-weight-500 font80 margin-left-lg">
						{{total}}分
					</view>
				</view>
			</view>
		</view>
		<div v-if="nav">
			<!-- <img alt="Vue logo" src="./assets/logo.png" />
		  <HelloWorld msg="Welcome to Your Vue.js App" /> -->
			<transition name="nav">
				<div class="m-navba" v-if="nav">

					<view class="wrap-y" style="justify-content: center;padding: 0 20px;">
						<!-- 			<view class="wrap-x row margin-top-sm">
							<view class="label " style="font-weight: 550;">1.弹性子元素宽度</view>
						</view>
						<view class="margin-top-sm wrap-row margin-left">
							<view>width({{width}}%):</view>
							<slider :value="width" @changing="changeWidth" block-size="20" block-color="#ffaa00" activeColor="#ffaa00" style="width:40vw"></slider>
						</view> -->
						<view class="wrap-x row margin-top-sm">
							<view class="label " style="font-weight: 550;">是否开启Flex布局：</view>
							<switch @change="changeFlex" :checked="isFlex" style="transform:scale(0.8)" color="#ffaa00">
							</switch>
							<!-- <img :src="isFlex?'../static/select.svg':'../static/unselect.svg'" style="height: 60rpx;width: 60rpx;"
								@click="changeFlex"></img> -->
						</view>
						<view style="text-align: center;padding: 8px 0;font-size: 20px;">
							根布局属性设置区</view>
						<view class="wrap-x">
							<view class="wrap-y margin-left	">
								<view class="wrap-x row margin-top-sm">
									<view class="label " style="font-weight: 550;color: red;">flex-direction</view>
								</view>
								<radio-group class="margin-top-sm wrap-y" @change="changeFlexDirection">
									<radio color="#ffaa00" style="transform:scale(0.8)" value="row" checked>row
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="row-reverse">
										row-reverse
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="column">column
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="column-reverse">
										column-reverse </radio>
								</radio-group>
							</view>
							<view class="wrap-y margin-left">
								<view class="wrap-x row margin-top-sm">
									<view class="label " style="font-weight: 550;color: red;">flex-wrap</view>
								</view>
								<radio-group class="margin-top-sm wrap-y" @change="changeflexWrap">
									<radio color="#ffaa00" style="transform:scale(0.8)" value="nowrap" checked>
										nowrap
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="wrap">wrap </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="wrap-reverse">
										wrap-reverse </radio>
								</radio-group>
							</view>
							<view class="wrap-y margin-left">
								<view class="wrap-x row margin-top-sm">
									<view class="label " style="font-weight: 550;color: red;">justify-content</view>
								</view>
								<radio-group class="margin-top-sm wrap-y" @change="changeJustify">
									<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-start" checked>
										flex-start </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-end">flex-end
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="center">center
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="space-between">
										space-between </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="space-around">
										space-around </radio>
								</radio-group>
							</view>

							<view class="wrap-y margin-left">
								<view class="wrap-x row margin-top-sm">
									<view class="label " style="font-weight: 550;color: red;">align-content</view>
								</view>
								<radio-group class="margin-top-sm wrap-y" @change="changeAlignContent">
									<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-start" checked>
										flex-start </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-end">flex-end
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="center">center
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="space-between">
										space-between </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="space-around">
										space-around </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="stretch"> stretch
									</radio>
								</radio-group>
							</view>
							<view class="wrap-y margin-left">
								<view class="wrap-x row margin-top-sm">
									<view class="label " style="font-weight: 550;color: red;">align-items</view>
								</view>
								<radio-group class="margin-top-sm wrap-y" @change="changeAlignItems">
									<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-start" checked>
										flex-start </radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="flex-end">flex-end
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="center">center
									</radio>
									<radio color="#ffaa00" style="transform:scale(0.8)" value="stretch"> stretch
									</radio>
								</radio-group>
							</view>
						</view>

						<button class="cu-btn bg-red margin-tb-lg" @click="nav = false">确认</button>
					</view>

				</div>
			</transition>

		</div>
	</view>
</template>

<script>
	import canvas from '@/static/canvas.js'

	export default {
		name: "project5",
		data() {
			return {
				nav: false,
				list: [{
					id: 1,
					title: '题目一'
				}, {
					id: 1,
					title: '题目二'
				}, {
					id: 1,
					title: '题目三'
				}, {
					id: 1,
					title: '题目四'
				}],
				isStart: false,
				cur: 0,
				data1: [{
						img: '//p5.img.cctvpic.com/photoAlbum/page/performance/img/2023/11/10/1699592402457_972.jpg',
						title: '“学习贯彻习近平新时代中国...'
					},
					{
						img: '//p5.img.cctvpic.com/photoworkspace/2023/01/12/2023011208563664795.jpg',
						title: '《党支部标准化规范化建设》...'
					},
					{
						img: '//p2.img.cctvpic.com/photoworkspace/2023/01/16/2023011610192518359.jpg',
						title: '《习近平谈治国理政》第四卷...'
					},
					{
						img: '//p4.img.cctvpic.com/photoworkspace/2022/11/14/2022111412450271661.jpg',
						title: '二十大党章公开课'
					},
					{
						img: '//p3.img.cctvpic.com/photoworkspace/2022/11/10/2022111009372580454.jpg',
						title: '《党史上的重要会议》系列微...'
					},
					{
						img: '//p1.img.cctvpic.com/photoAlbum/page/performance/img/2022/1/6/1641451573364_181.jpg',
						title: '学习领会党的十九届六中全会...'
					},
					{
						img: '//p2.img.cctvpic.com/photoworkspace/2021/07/21/2021072109105024437.jpg',
						title: '学习贯彻“七一”重要讲话精神...'
					},
					{
						img: '//p5.img.cctvpic.com/photoworkspace/2021/05/25/2021052509221715365.jpg',
						title: '“中共党史公开课”网络课程'
					}
				],
				bgColor: '#34daaa',
				bgColor2: '#ffaa7f',
				borderColor: '#ff5500',
				width: 200,
				height: 200,
				widthTxt: 200,
				margin: 0,
				padding: 0,
				border: 0,
				border_radiu: 0,
				box_shadow1: 0,
				box_shadow2: 0,
				box_shadow3: 0,
				box_shadow4: '#000000',
				box_shadow5: 0,
				margin1: 0,
				margin2: 0,
				margin3: 0,
				margin4: 0,
				padding1: 0,
				padding2: 0,
				fontSzie: 14,
				padding3: 0,
				padding4: 0,
				time: 1,
				interval: null,
				isFinish: false,
				isStart: false,
				position: 'static',
				overflow: 'visible',
				zindex: 0,
				right: 0,
				left: 0,
				bottom: 0,
				top: 0,
				flex_direction: "row",
				flex_wrap: "nowrap",
				justify_content: "flex-start",
				align_items: "flex-start",
				align_content: "flex-start",
				align_self: "",
				isFlex: false,
				navFlex: false,
				num1: 0,
				num2: 0,
				num3: 0,
				num4: 0,
				total: 0
			};
		},
		methods: {
			go(index) {
				this.cur = index;
				this.nav = false
				this.list = [{
					id: 1,
					title: '题目一'
				}, {
					id: 1,
					title: '题目二'
				}, {
					id: 1,
					title: '题目三'
				}, {
					id: 1,
					title: '题目四'
				}]
				this.isStart = false
				if (index == 2 || index == 3) {
					this.data1 = [{
						img: '//p5.img.cctvpic.com/photoAlbum/page/performance/img/2023/11/10/1699592402457_972.jpg',
						title: '“学习贯彻习近平新时代中国...'
					},
					{
						img: '//p5.img.cctvpic.com/photoworkspace/2023/01/12/2023011208563664795.jpg',
						title: '《党支部标准化规范化建设》...'
					},
					{
						img: '//p2.img.cctvpic.com/photoworkspace/2023/01/16/2023011610192518359.jpg',
						title: '《习近平谈治国理政》第四卷...'
					},
					{
						img: '//p4.img.cctvpic.com/photoworkspace/2022/11/14/2022111412450271661.jpg',
						title: '二十大党章公开课'
					}
					]
				} else {
					this.data1 = [{
						img: '//p5.img.cctvpic.com/photoAlbum/page/performance/img/2023/11/10/1699592402457_972.jpg',
						title: '“学习贯彻习近平新时代中国...'
					},
					{
						img: '//p5.img.cctvpic.com/photoworkspace/2023/01/12/2023011208563664795.jpg',
						title: '《党支部标准化规范化建设》...'
					},
					{
						img: '//p2.img.cctvpic.com/photoworkspace/2023/01/16/2023011610192518359.jpg',
						title: '《习近平谈治国理政》第四卷...'
					},
					{
						img: '//p4.img.cctvpic.com/photoworkspace/2022/11/14/2022111412450271661.jpg',
						title: '二十大党章公开课'
					},
					{
						img: '//p3.img.cctvpic.com/photoworkspace/2022/11/10/2022111009372580454.jpg',
						title: '《党史上的重要会议》系列微...'
					},
					{
						img: '//p1.img.cctvpic.com/photoAlbum/page/performance/img/2022/1/6/1641451573364_181.jpg',
						title: '学习领会党的十九届六中全会...'
					},
					{
						img: '//p2.img.cctvpic.com/photoworkspace/2021/07/21/2021072109105024437.jpg',
						title: '学习贯彻“七一”重要讲话精神...'
					},
					{
						img: '//p5.img.cctvpic.com/photoworkspace/2021/05/25/2021052509221715365.jpg',
						title: '“中共党史公开课”网络课程'
					}
					]
				}

				this.bgColor = '#34daaa'
				this.bgColor2 = '#ffaa7f'
				this.borderColor = '#ff5500'
				this.width = 200
				this.height = 200
				this.widthTxt = 200
				this.margin = 0
				this.padding = 0
				this.border = 0
				this.border_radiu = 0
				this.box_shadow1 = 0
				this.box_shadow2 = 0
				this.box_shadow3 = 0
				this.box_shadow4 = '#000000'
				this.box_shadow5 = 0
				this.margin1 = 0
				this.margin2 = 0
				this.margin3 = 0
				this.margin4 = 0
				this.padding1 = 0
				this.padding2 = 0
				this.fontSzie = 14
				this.padding3 = 0
				this.padding4 = 0
				this.time = 1
				this.interval = null
				this.isFinish = false
				this.isStart = false
				this.position = 'static'
				this.overflow = 'visible'
				this.zindex = 0
				this.right = 0
				this.left = 0
				this.bottom = 0
				this.top = 0
				this.flex_direction = "row"
				this.flex_wrap = "nowrap"
				this.justify_content = "flex-start"
				this.align_items = "flex-start"
				this.align_content = "flex-start"
				this.align_self = ""
				this.isFlex = false
				this.navFlex = false
				this.num1 = 0
				this.num2 = 0
				this.num3 = 0
				this.num4 = 0
				this.total = 0
			},
			start() {
				if (!this.isStart) {
					this.isStart = true
					this.interval = setInterval(() => {
						this.time++
					}, 1000)
				} else {
					this.isStart = false

					clearInterval(this.interval)
					uni.showToast({
						title: "自动评分中，请稍后",
						icon: "loading",
						duration: 3 * 1000,

					})
					setTimeout(() => {
						this.isFinish = true
						let s = (100 - this.time * 0.1).toFixed(0)
						this.num1 = s > 0 ? s : 0
						if (this.cur == 0) {
							this.num2 = 0;
							if (this.isFlex) {
								this.num2 = this.num2 + 30
							}
							if (this.flex_wrap == "wrap") {
								this.num2 = this.num2 + 40
							}
							if (this.justify_content == "space-between") {
								this.num2 = this.num2 + 40
							}
						}
						if (this.cur == 1) {
							this.num2 = 0;
							if (this.isFlex) {
								this.num2 = this.num2 + 30
							}
							if (this.flex_wrap == "wrap") {
								this.num2 = this.num2 + 40
							}
							if (this.justify_content == "space-around") {
								this.num2 = this.num2 + 40
							}
						}
						if (this.cur == 2) {
							this.num2 = 0;
							if (this.isFlex) {
								this.num2 = this.num2 + 50
							}
							if (this.justify_content == "space-between") {
								this.num2 = this.num2 + 50
							}
						}
						if (this.cur == 3) {
							this.num2 = 0;
							if (this.isFlex) {
								this.num2 = this.num2 + 50
							}
							if (this.justify_content == "space-around") {
								this.num2 = this.num2 + 50
							}
						}
						this.num4 = (parseInt(this.num1) + parseInt(this.num2)) / 2; // 返回 0 至 99 之间的数
						this.total = parseInt(this.num1) + parseInt(this.num2) + parseInt(this.num4)
						let data = [{
								"money": this.num1 + '分',
								"value": parseFloat((this.num1 / this.total).toFixed(2)),
								"color": "#ffaa00",
								"title": "用时得分"
							},
							{
								"money": this.num2 + '分',
								"value": parseFloat((this.num2 / this.total).toFixed(2)),
								"color": "#55aa00",
								"title": "布局"
							},

							{
								"money": this.num4 + '分',
								"value": parseFloat((this.num4 / this.total).toFixed(2)),
								"color": "#ff5500",
								"title": "整体"
							}
						];
						setTimeout(() => {
							canvas.canvasGraph('homeownerCanvas', data, this.total)
						}, 200)
						// 调用外部方法并传入参数

					}, 3 * 1000)

				}

			},
			showCss() {
				if (this.isStart) {
					this.nav = true
				} else {
					uni.showToast({
						icon: 'error',
						title: "请先开始"
					})
				}
			},
			changeFlexDirection(value) {
				this.flex_direction = value.detail.value;
			},
			changeflexWrap(value) {
				this.flex_wrap = value.detail.value;
			},
			changeJustify(value) {
				this.justify_content = value.detail.value;
			},
			changeAlignItems(value) {
				this.align_items = value.detail.value;
			},
			changeAlignContent(value) {
				this.align_content = value.detail.value;
			},
			changeAlignSelf(value) {
				this.align_self = value.detail.value;
			},
			add() {
				let obj = {
					index: this.list[this.list.length - 1].index + 1,
					flex: '',
					order: 1
				}
				this.list.push(obj)
			},
			remove(index) {
				this.list.splice(index, 1)
			},
			changeWidth(event) {
				this.width = event.detail.value;
			},
			changeFlex(event) {
				this.isFlex = event.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.select {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		width: 60vw;
		margin: auto;

		.item {
			font-size: 28rpx;
			padding: 20rpx 60rpx;
			border-radius: 8rpx;
			border: 1rpx solid red;
			margin: 0 20px;
			background: wheat;
			color: red;


		}

		.active {
			background: red;
			color: white;

		}
	}

	.index1 {
		width: 70vw;
		margin: auto;
	}

	.scroll-view {
		padding-top: 20px;
		overflow: scroll;
		height: calc(100vh-300px);
		background-color: #fff;
	}

	.btn {
		padding: 6px 12px;
		background-color: red;
		color: white;
		border-radius: 4px;
		margin-left: 10px;
		font-size: 20px;
	}

	.time {
		color: red;
		margin-left: 20px;
		font-size: 22px;
		font-weight: 550;
	}

	.root1 {
		display: flex;

	}

	.scroll-view :hover {
		background-color: rgba(0, 0, 0, 0.01);
		border: 1px solid #eee;
		// box-shadow: 5px 5px 5px #666;
	}

	/* 遮罩层 */
	.m-navbar {
		position: fixed;
		left: -3px;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: #000;
		opacity: 0.5;
		z-index: 2;
	}

	/* 存放弹框内容 */
	.m-navba {
		position: absolute;
		left: 70vw;
		right: 0;
		top: 50px;
		bottom: 50px;
		background-color: #fff;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		z-index: 1000;
		border: 1px solid #ddd;
	}

	.nav-leave {
		/* 定义 出场动画的 起始状态 */
		/* 只停留一帧 */
		transform: translateX(0px);
	}

	.nav-leave-active {
		/* 定义 出场动画 过程 */
		transition: all 0.4s ease;
	}

	.nav-leave-to {
		/* 定义 出场动画 结束状态（即：该动画要达到的目标状态） */
		transform: translateX(600px);
	}

	/* 定义  入场动画 */
	.nav-enter {
		/* 定义 入场动画 的起始状态 */
		transform: translateX(600px);
	}

	.nav-enter-active {
		/* 定义 入场动画 过程 */
		transition: all 0.4s ease;
	}

	.nav-enter-to {
		/* 定义 入场动画 过程 */
		/* 只停留一帧 */
		transform: translateX(0px);
	}
</style>